<template>
  <div class="children-node">
    <div v-if="data.type === '2'">
      <div v-if="data.children && data.children.length" class="btns-content">
        <div class="btn" v-for="item in data.children" :key="item.id">
          <el-checkbox
            :value="item.isCheck"
            true-label="1"
            false-label="0"
            border
            @change="(val) => handleChange(val, item)">
            {{ data.name }}
          </el-checkbox>
        </div>
      </div>
    </div>
    <template v-else>
      <div v-if="data.type !== '2'"  class="title">
        {{ data.name }}
      </div>
      <template v-if="data.children && data.children.length">
        <tree-children
          v-for="item in data.children"
          v-bind="$attrs"
          v-on="$listeners"
          :data="item"
          :key="item.id">
        </tree-children>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'treeChildren',
  componentName: 'treeChildren',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  methods: {
    handleChange(val, data) {
      this.$emit('change', val, data);
    },
  }
};
</script>

<style lang="scss" scoped>
  .children-node {
    width: 100%;
    .title {
      height: 30px;
      line-height: 30px;
      font-weight: 500;
      font-size: 16px;
    }
    .btns-content {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      white-space: pre-wrap;
      .btn {
        margin: 20px 20px 0 0;
      }
    }
  }
</style>
